<template>
  <div class="andonList zy-content">
    <div class="searchBox search-box-layout mb16">
      <Row :gutter="24">
        <Col span="4">
          <div>
            <p class="label">{{$t('工站')}}</p>
            <div class="ipt">
              <Cascader clearable :data="orgList" v-model="searchParams.hierarchyCode"
                  :placeholder="`${$t('common.selectInfo')}`" change-on-select>
              </Cascader>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{$t('问题类型')}}</p>
            <div class="ipt">
              <Select  v-model="searchParams.issueType" clearable :disabled="showF" :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of issueTypeList" :value="item.value" :key="index">{{ item.name }}</Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{$t('原因代码')}}</p>
            <div class="ipt">
              <Select  v-model="searchParams.reasonCode" clearable :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of reasonList" :value="item.reasonCode" :key="index">{{ item.reasonCode+'-'+item.reasonDesc }}</Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{$t('操作人')}}</p>
            <div class="ipt">
              <Select  v-model="searchParams.operatorNo" filterable clearable :placeholder="`${$t('common.selectInfo')}`" @on-query-change="timeOutgetUserNo">
                  <Option v-for="(item,index) of userNoArr" :value="item.empno" :key="index">{{ item.empno+'-'+item.realname }}</Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button class="search-btn" type="primary" v-has="'andonSearch'" @click="handleRefresh">{{ $t('common.Query') }}</Button>
              <Button
                  class="reset-btn"
                  @click="resetSearch()"
                  v-has="'andonSearch'"
              >{{ $t('common.reset') }}
              </Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <div class="loading-bg" v-if="loading" @click="loadingWarning"></div>
    <Tabs class="tabs-layout mb16" :value="searchParams.status" @on-click="onTabs">
      <TabPane :label="label1" name="0"></TabPane>
      <TabPane :label="label2" name="1"></TabPane>
      <TabPane :label="label3" name="3"></TabPane>
      <TabPane :label="label4" name="2"></TabPane>
    </Tabs>
    <div class="wrap">
      <div class="item" v-for="order in list" :key="order.id">
        <orderStatusIcon :status="searchParams.status"/>
        <div class="name">
          {{ order.issueType }}
        </div>
        <div class="details">
          <div class="formItem">
            <div class="label" >{{ $t('Andon事件号') }}：</div>
            <div class="value num" @click="toDetail(order)">{{ order.andonNo }}</div>
          </div>
          <div class="formItem">
            <div class="label">{{ $t('工站') }}：</div>
            <div class="value">{{ order.workstation }}</div>
          </div>
          <div class="formItem">
            <div class="label">{{ $t('原因代码') }}：</div>
            <div class="value ">{{ order.reasonCode }}</div>
          </div>
          <div class="formItem">
            <div class="label">{{ $t('原因描述') }}：</div>
            <div class="value ">{{ order.reasonDesc }}</div>
          </div>
          <div class="formItem">
            <div class="label">{{ $t('操作人') }}：</div>
            <div class="value ">{{ order.operator }}</div>
          </div>
          <div class="formItem">
            <div class="label">{{ $t('事件触发时间') }}：</div>
            <div class="value ">{{ order.issueTime }}</div>
          </div>
          <div class="formItem">
            <div class="label">{{ $t('备注') }}：</div>
            <div class="value ">{{ order.comment }}</div>
          </div>
          <div class="btnF">
            <!-- <Button type="error" v-has="'workorderTakeWorkorderDelete'" ghost
                    @click="handleDeleteModal(order)">
              {{ $t('common.Delete') }}
            </Button> -->
            <!--维修申请确认-->
            <template v-if="searchParams.status !== '2' && order.issueType !== '设备问题'">
              <template v-if="searchParams.status==='1'||(searchParams.status==='3'&&order.andonStatus==1)">
                <Button v-has="'andonClose'" class="blue" type="primary" ghost @click="ackMethod(order)">
                  {{$t('common.close')}}
                </Button>
              </template>
              <template v-else>
              <Button v-has="'andonAck'" class="blue" type="primary" ghost @click="ackMethod(order)">
                {{ 'ACK' }}
              </Button>
              </template>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="pageWrap mt16" v-if="total > 0">
      <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
            @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
    </div>
    <Modal :mask-closable="false" v-model="ackShow" class="modal-title-layout" :title="`${$t('确认')}`">
      <div class="icon blue">
        <i class="iconfont zy-common-chenggong1"></i>
      </div>
      <p class="title">
        <span>{{ $t('请确认') }}?</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="ackShow = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary"
                @click="ackClick">{{ $t('maintenance.Confirmed') }}
        </Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" class="modal-title-layout" v-model="deleteShow" :title="`${$t('common.Delete')}`">
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>{{ $t('common.confirmDelete') }}</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="deleteShow = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" :loading="repairLoading"
                @click="handleDelete ">{{ $t('maintenance.Confirmed') }}
        </Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" class="modal-title-layout" v-model="detailShowF" :title="`${$t('安灯详情')}`" width='1000' footer-hide>
      <detail :idF="id" v-if="detailShowF"></detail>
    </Modal>
  </div>
</template>

<script>
import { searchApi } from "@/api/andon/reasonCode/index.js";
import recursion from '../../../util/recursion';
import detail from "./detail";
import orderStatusIcon from "./modules/orderStatusIcon";
export default {
  name: 'orderList',
  components: {
    orderStatusIcon,detail
  },
  data() {
    return {
      detailShowF:false,
      ackShow: false,
      deleteShow: false,
      loading: false,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      labelCount1: 0,
      labelCount2: 0,
      labelCount3: 0,
      labelCount4: 0,
      label1: (h) => {
        return h('div', [
          // h('span', '待响应'),
          h('span', `${this.$t('待响应')}`),
          h('Badge', {
            props: {
              count: this.labelCount1
            }
          })
        ])
      },
      label2: (h) => {
        return h('div', [
          //h('span', '处理中'),
          h('span', `${this.$t('处理中')}`),
          h('Badge', {
            props: {
              count: this.labelCount2
            }
          })
        ])
      },
      label3: (h) => {
        return h('div', [
          // h('span', '升级中'),
          h('span', this.$t('升级中')),
          h('Badge', {
            props: {
              count: this.labelCount3
            }
          }),
        ])
      },
      label4: (h) => {
        return h('div', [
          // h('span', '已结单'),
          h('span', `${this.$t('已结案')}`),
          h('Badge', {
            props: {
              count: this.labelCount4
            }
          })
        ])
      },
      searchParams: {
        status: '0'
      },
      orgList: [],
      issueTypeList:[
          {id:1,name: this.$t('人为问题') ,value:"人为问题"},
          {id:2,name: this.$t('物料问题'),value:"物料问题" },
          {id:3,name: this.$t('质量问题'),value:"质量问题" },
          {id:4,name: this.$t('其他问题') ,value:"其他问题"},
          {id:5,name: this.$t('设备问题') ,value:"设备问题"},

      ],
      list: [],
      companyList: [], // 所属公司data
      userNoArr:[],
      andonNumber:'',
      andonType:'',
      id:'',
      reasonList:[],
    }
  },
  created() {
    const status = sessionStorage.getItem('workOrderHallStatus')
    if (status) {
      this.searchParams.status = status
      sessionStorage.removeItem('workOrderHallStatus')
    }
    this.getCountsList()
    this.getOrgList()
    this.getList()
    this.getReasonCode()
  },
  mounted() {

  },
  methods: {
    resetSearch(){
        this.searchParams = {
          status: '0'
        }
        this.getCountsList()
        this.getList()
    },
    getReasonCode() {
        let params = {
            pageNum: 1,
            pageSize: 1000,
        };
        searchApi(params).then(res => {
            if (res.code === 200) {
                this.reasonList = res.data.list
            } else {
                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
            }
        })
    },
    //延时查询
    timeOutgetUserNo(query){
        clearTimeout(this.timeout);
        let isSearchF =false;
        this.timeout = setTimeout(() => {
            if(query !=""){
                for(let item of this.userNoArr){
                    if(item.empno==query||item.empno+'-'+item.realname==query||item.realname==query){
                        isSearchF = true
                    }
                }
                if(isSearchF==false){
                    this.getUserNo(query,1);
                }
            }
        }, 500);
    },
    getUserNo(query,type){
        return new Promise(resolve => {
            this.axios({
                method: 'get',
                url: '/basic/user/searchUser',
                params: {
                    key:query
                }
            }).then(res => {
                if(res.code === 200){
                    if(type===1){
                        this.userNoArr = res.data
                    }
                }else{
                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            }).finally(() => {
                resolve()
            })
        });
    },
    toDetail(item){
      this.id = item.id
      this.detailShowF = true
    },
    cancel(){
      this.detailShowF = false
    },
    getOrgList() {
      this.axios({
        method: 'get',
        url: '/basic/organization/findListByToken',
        params: {
          level: 3
        }
      }).then(res => {
        if (res.code === 200) {
          const obj = {
            label: 'name',
            value: 'code',
            children: 'children'
          }
          this.orgList = recursion.convertTree(res.data, obj)
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    getCountsList() {

      let params = {
        hierarchyCode: this.searchParams.hierarchyCode && this.searchParams.hierarchyCode.at(-1),
        reasonCode: this.searchParams.reasonCode,
        issueType: this.searchParams.issueType,
        operatorNo: this.searchParams.operatorNo,
        andonStatus:this.searchParams.status,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };

      this.axios({
        method: 'get',
        url: '/dms/andonTask/findNum',
        params: params
      }).then(res => {
        if (res.code === 200) {
          let obj = res.data
          this.labelCount1 = 0
          this.labelCount2 = 0
          this.labelCount3 = 0
          this.labelCount4 = 0
          if (Reflect.has(obj, 0)) {
            this.labelCount1 = obj[0]
          }
          if (Reflect.has(obj, 1)) {
            this.labelCount2 = obj[1]
          }
          if (Reflect.has(obj, 2)) {
            this.labelCount3 = obj[3]
          }
          if (Reflect.has(obj, 3)) {
            this.labelCount4 = obj[2]
          }
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },

    //刷新
    handleRefresh() {
      this.getList()
      this.getCountsList()
    },

    // 确认查看详情
    handleConfirmOrder(order) {
      // this.$refs.orderDetailModal.show(order.id, this.searchParams.status)
      // const userId = localStorage.getItem('ziyunFactoryUserId')
      this.$router.push({
        path: "/fault/statement/workOrderDetail",
        query: {
          id: order.id,
          status: this.searchParams.status
        }
      })
    },
    //删除
    handleDeleteModal(item) {
      this.deleteShow = true
      this.detailId = item.id
    },
    handleDelete() {
      this.axios({
        method: 'get',
        url: '/dms/workOrder/delete',
        params: {
          id: this.detailId,
        }
      }).then(res => {
        if (res.code === 200) {
          this.$Message.success(({content: "删除成功", duration: 6, closable: true}));
          this.deleteShow = false
          this.detailId = ""
          this.getList()
          this.getCountsList()
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      }).finally(() => {
        this.repairLoading = false
        this.confirmFaultCodeShowF = false
        this.backFaultCodeShowF = false
      })
    },
    ackMethod(item){
      this.ackShow = true
      console.log(item)
      this.andonNumber = item.andonNo
      this.andonType = Number(item.andonStatus)+1
    },
    ackClick(){
      this.axios({
        method: 'post',
        url: '/dms/andonTask/ack',
        data: {
          andonNumber: this.andonNumber,
          type:this.andonType,
          deviceType:1
        }
      }).then(res => {
        if (res.code === 200) {
          this.$Message.success(({content: res.msg, duration: 6, closable: true}));
          this.ackShow = false
          this.getList()
          this.getCountsList()
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    changePageSize(val) {
      this.pageSize = val
      this.getList()
    },
    changePageNum(val) {
      this.pageNum = val
      this.getList()
    },
    getList() {
      let cacheStatus = this.searchParams.status
      let params = {
        hierarchyCode: this.searchParams.hierarchyCode && this.searchParams.hierarchyCode.at(-1),
        reasonCode: this.searchParams.reasonCode,
        issueType: this.searchParams.issueType,
        operatorNo: this.searchParams.operatorNo,
        andonStatus:this.searchParams.status,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.loading = true;
      this.axios({
        method: 'get',
        url: '/dms/andonTask/page',
        params: params
      }).then(res => {
        if (res.code === 200) {
          if (cacheStatus === this.searchParams.status) {
            this.list = res.data.list
            this.total = res.data.total
          }
        } else {
          this.list = []
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    tabsBeforeLeave(activeName, oldActiveName) {
      return !this.loading;
    },
    onTabs(val) {
      this.searchParams.status = val;
      this.pageNum = 1;
      this.list = []
      this.getList(val);
    },
    loadingWarning() {
      this.$Message.warning(this.$t('message.pleaseWait'));
    }
  }
}
</script>

<style lang="scss" scoped>
.andonList {
  //background: #fff;

  .tabWrap {
    display: flex;
    border-bottom: 1px solid #dcdee2;
    position: relative;

    .loading-bg {
      background: transparent;
      width: calc(100% - 223px);
      height: 100%;
      z-index: 11;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .formWrap {
    ::v-deep .ivu-form-item {
      margin-bottom: 0;
    }
  }

  .wrap {
    display: flex;
    flex-wrap: wrap;

    .item {
      width: calc((100% - 64px) / 5);
      margin-top: 15px;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;
      position: relative;
      padding: 0 15px;
      line-height: 24px;
      height: 402px;
      margin-right: 16px;

      &:nth-child(5n+5) {
        margin-right: 0;
      }

      .topR {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 60px;
        height: 50px;
        z-index: 11;

        img {
          width: 100%;
          height: auto;
          overflow: hidden;
        }
      }

      .name {
        position: relative;
        //height: 48px;
        line-height: 20px;
        margin-top: 10px;
        margin-right:60px;
        span {
          display: inline-block;
          /*height: 40px;*/
          /*line-height: 40px;*/
          padding: 0 3px;

          &:nth-child(1) {
            color: #333;
            font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            /*line-height: 40px;*/
          }

          &:nth-child(2) {
            color: #666;
            font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
            font-size: 12px;
            /*line-height: 40px;*/
          }
        }

        .name-img {
          width: 69px;
          height: 26px;
          display: inline-block;
          position: absolute;
          left: 170px;
          top: 0;

          img {
            width: 100%;
            height: 100%;
            overflow: hidden;
          }
        }
      }

      .details {
        height: 353px;
        padding-left: 10px;
        background-color: #f8fcff;
        margin-top: 12px;
        position: relative;
        box-sizing: border-box;
        padding-top: 10px;

        .formItem {
          display: flex;
          align-items: center;

          .label {
            width: 90px;
            font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
            font-weight: 400;
            font-style: normal;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 12px;
            color: #888888;
            line-height: 30px;
          }

          .value {
            width: calc(100% - 90px);
            color: #333;
            padding: 0 3px;
            font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 12px;
          }

          .num {
            color: #187bdb;
            text-decoration: underline;
            cursor: pointer;
          }
        }

        .img {
          position: absolute;
          bottom: 0;
          right: 0;
          font-size: 36px;
        }

        .preview {
          position: absolute;
          right: 0;
          bottom: 50px;
          width: 40px;
          height: 40px;
          background: #eee;

          .preview-img {
            width: 40px;
            height: 40px;
            overflow: hidden;
          }
        }
      }

      .ivu-tag-blue {
        border-color: #f1f7fd;
        border-radius: 24px;
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #187BDE !important;
      }

      .ivu-tag-red {
        border-color: #f1f7fd;
        border-radius: 24px;
        color: #187BDE !important;
      }

      ::v-deep .ivu-tag-blue .ivu-tag-text {
        color: #187BDE !important;
        padding: 3px 3px;
      }

      ::v-deep .ivu-tag-red .ivu-tag-text {
        color: #E03E55 !important;
        padding: 3px 3px;
      }

      .btnF {
        line-height: 40px;
        position: absolute;
        bottom: 8px;
        right: 10px;

        button {
          margin-left: 5px;
        }
      }
    }
  }

  .title {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;

    .icon {
      display: flex;

      .creatBtnright {
        display: flex;
        align-items: center;
        font-size: 16px;

        i {
          font-size: 36px;
        }
      }
    }
  }
}

.over-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

::v-deep .tab {
  background-color: #fff;
  height: 50px;
  padding: 10px 50px;
  flex: 1;

  .ivu-tabs-bar {
    padding-left: 30px;
    border-bottom: none;
  }

  .ivu-tabs-tab {
    height: 50px;
    line-height: 50px;
    padding: 0 16px;

    div {
      font-size: 16px;
    }
  }
}

.unreciver {
  position: relative;
  display: inline-block;
  width: 69px;
  height: 35px;
  margin-right: 10px;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
  border-radius: 5px;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
  vertical-align: none;
  text-align: center;
  line-height: 35px;
  text-transform: none;

  img {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 23px;
    right: 1px;
  }
}

.black {
  color: #000;
  border-color: #333;
}

.blue {
  background: transparent !important;
  color: #2d8cf0 !important;
}

.red {
  width: calc(100% - 120px);
  color: red;
  padding: 0 3px;
  font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 30px;
}

.green {
  width: calc(100% - 120px);
  color: #31B404;
  padding: 0 3px;
  font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 30px;
}

.yellow {
  width: calc(100% - 120px);
  color: #FFBF00;
  padding: 0 3px;
  font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 30px;

}
</style>
<style lang="scss">
@media (max-width: 1600px) and (min-width: 1301px) {
  .orderList .wrap .item {
    width: calc((100% - 48px) / 4) !important;
    margin-right: 16px !important;

    &:nth-child(4n+4) {
      margin-right: 0 !important;
    }
  }
}

@media (max-width: 1300px) and (min-width: 1000px) {
  .orderList .wrap .item {
    width: calc((100% - 32px) / 3) !important;
    margin-right: 16px !important;

    &:nth-child(3n+3) {
      margin-right: 0 !important;
    }
  }
}
</style>
